<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增课程</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-blue/easyui.css">

</head>
<body>
<style type="text/css">
.background{
	width: 1115px;
    height: 565px;
    margin: 0px auto;
    margin-top: 12px;
    background-color: #FFF;
}
.notice-head{
	width: 1115px;
    height: 43px;
    color: #19AA9A;
    font-size: 18px;
    text-align: center;
    line-height: 45px;
    font-weight: 700;
    margin-left: -128px;
    box-shadow: 0 8px 12px #97e2d3;
}
.cols{
	padding-right: 5px;
    padding-left: 0;
	float:left;
}
.colsinput{
	transition: none;
    height: 22px;
    width:220px;
    padding: 0 4px;
    font-size: 12px;
    border-radius: 2px;
    border: 1px solid #eee;
}
.col_lab{
	display:block;
	width:calc(20%);
	float:left;
	text-align:right;
	margin-top: 3px;
}
.icon-kaoshi1{
	width:100px;
	height:100px;
	margin:10px auto;
	background:url('static/easyui/themes/icons/test1.png') no-repeat  center center;
}
.icon-kaoshi1:hover{
	background:url('static/easyui/themes/icons/test2.png') no-repeat  center center;
}

.notest{
	width:fit-content;
	padding:2px 12px;
	float:left;
	margin:5px 10px;
	background:beige;
}
</style>

<script type="text/javascript">
function ininta(){
	var d=$("<div class='icon-kaoshi1'></div>");
	$(".dingwei").append(d);
}
function chadia(a){
	$(a).parent(".notest").remove();
	ininta();
}
	$(function(){
		ininta();
		$(".baocun_add").click(function(){
			var a=$(".course_name").val();
			var b=$(".course_type").val();
			var c=$(".teach_j").val();
			var d=$(".course_details").val();
			var e=$("#row-file-img").attr("src");
			if(a==""||a==null){
				alert("请输入课程名称")
				return false;
			}else if(b=="请选择"||b==null){
				alert("请选择课程类型")
				return false;
			}else if(c==""||c==null){
				alert("请选择培训讲师")
				return false;
			}else if(e==""||e==null){
				alert("请选择图片")
				return false;
			}else{
				$.ajax({
					url:"save-course",
					type:"post",
					data:{"courseName":a,"courseType":b,"teacher_id":c,"courseDetails":d,"courseUrl":e},
					success:function(data){
						alert("保存成功");
						$("#content-admin").panel('open').panel('refresh','train-courseku');
					}
				});
			}
		});
		//点击试卷图标
		$(".icon-kaoshi1").click(function(){
		  $(".textbox-text").show();
			
		});
		$(".baocun_quxiao").click(function(){
			$("#content-admin").panel('open').panel('refresh','train-courseku');
		});
		
		$('.teacher_name').combogrid({
		    panelWidth:220,
		    idField:'teacher_id',
		    textField:'Staff_name',
		    url:'selectfindteacher',
		    onSelect: function(rowIndex, rowData){
		    	$(".teach_j").val(rowData.teacher_id);
		    },
		    columns:[[
		    {field:'teacher_id',title:'讲师编号',width:70},
		    {field:'Staff_name',title:'讲师姓名',width:70},
		    {field:'depart_name',title:'部门',width:80}
		    ]]
		    });
		
		$('.test_list').combogrid({
		    panelWidth:562,
		    idField:'ttestid',
		    textField:'ttestname',
		    url:'selectfindtest',
		    onSelect: function(rowIndex, rowData){
				$(".dingwei").children(".icon-kaoshi1").remove();
				
				var i=$("<div class='notest'>"+rowData.ttestname+"</div>");
				var j=$("<a class='chadiao' abbr='"+rowData.ttestid+"' onClick='chadia(this)'>×</a>");
				i.append(j);
				$(".dingwei").append(i);
		    },
		    columns:[[
		    {field:'ttestid',title:'试卷编号',width:60},
		    {field:'ttestname',title:'试卷名称',width:150},
		    {field:'ttesttheme',title:'主题',width:150},
		    {field:'ttestdate',title:'创建日期',width:200,
		    	formatter:function formattime(value,row,index){
		    		var date = new Date(value);
			        var year = date.getFullYear().toString();
			        var month = (date.getMonth() + 1);
			        var day = date.getDate().toString();
			        var hour = date.getHours().toString();
			        var minutes = date.getMinutes().toString();
			        var seconds = date.getSeconds().toString();
			        if (month < 10) {
			            month = "0" + month;
			        }
			        if (day < 10) {
			            day = "0" + day;
			        }
			        if (hour < 10) {
			            hour = "0" + hour;
			        }
			        if (minutes < 10) {
			            minutes = "0" + minutes;
			        }
			        if (seconds < 10) {
			            seconds = "0" + seconds;
			        }
			        return year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + seconds;
			}
			}
		    ]]
		    });
		var course_name=$(".course_name").val();
		
		
		
	});
</script>
<div class="background">
	<div style="width:calc(100% - 260px);margin:auto;">
	<div class="notice-head">新增课程</div>
		<form id="job-modal-form"  method="post" enctype="multipart/form-data">
			<div style="width:100%;margin:15px auto;overflow:hidden;">
				<label class="col_lab"><span style="color:red">*</span>课程名称：</label>
				<div class="cols">
					<input class="colsinput course_name"/>
				</div>
				<label class="col_lab"><span style="color:red">*</span>课程类型：</label>
				<div class="cols">
					<select class="colsinput course_type">
						<option>请选择</option>
						<option>入职培训</option>
						<option>企业文化培训</option>
						<option>管理课程</option>
						<option>办公技能课程</option>
						<option>产品设计课程</option>
						<option>IT课程</option>
						<option>市场营销课程</option>
						<option>人力资源课程</option>
						<option>财务管理课程</option>
						<option>采购课程</option>
						<option>其它课程</option>
					</select>
				</div>
			</div>
			
			<div style="width:100%;margin:15px auto;overflow:hidden;">
				<label class="col_lab"><span style="color:red">*</span>培训讲师：</label>
				<div class="cols jiangshi">
					<input class="colsinput teacher_name easyui-combogrid" editable="false"/>
					<input type='hidden' class='teach_j'/>
				</div>
			</div>
			
			<div style="width:100%;margin:15px auto;overflow:hidden;">
				<label class="col_lab"><span style="color:red">*</span>课程详情：</label>
				<div class="cols">
					<textarea rows="4" style="width:664px;height:84px;" class="course_details"></textarea>
				</div>
			</div>
			
			<div style="width:100%;margin:10px auto;overflow:hidden;">
				<label class="col_lab"><span style="color:red">*</span>培训图片：</label>
				<div class="cols">
					<label for="avatarInput">本地上传	</label>
					<input type="file" id="file-g" name="fileImage" style="color:#fff">
					<img class="course_url" id="row-file-img" style="width:200px;height:140px;display:block;" src="">
				</div>
			</div>		
			<div style="width:100%;height:5px;position:fixed;bottom:80px;left:0;">
				<a class="baocun_add" style="width: 80px;height: 30px;background: #19AA8D;color: white;border-radius: 3px;display: block;margin: auto;
    				margin-left:715px;line-height: 30px;text-align: center;">保存</a>
    			<a class="baocun_quxiao" style="width: 80px;height: 30px;background: #d9534f;color: white;border-radius: 3px;display: block;margin: auto;
    				margin-left:820px;line-height: 30px;text-align: center;margin-top: -30px;">取消</a>
			</div>		
		</form>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		var input = document.getElementById("file-g");
		//文件域选择文件时, 执行readFile函数
		input.addEventListener('change',readFile,false);
		function readFile(){
			var file = this.files[0];			
			if(file==null){
				document.getElementById("row-file-img").setAttribute("src","");
				alert("请选择图片");
				return false;
			}else{
				if(file.name.split(".")[1]=="png"||file.name.split(".")[1]=="jpg"){
					if(file.size<1048576){
						 $("#job-modal-form").form('submit',{
							 url:'myimg',
							 async:false,
							 success:function(data){
								 document.getElementById("row-file-img").setAttribute("src",data);
							}
						 });
					}else{
						alert("图片太大，请重新选择");
						return false;
					}
				}else{
					alert("图片格式不正确，请重新选择");
					return false;
				}
			}
		}
		$("#job-modal-form").form('submit',{
			url:'myimg'
		})
	});
</script>
</body>
</html>
